<template>
    <div>
        <el-card shadow="hover">
            <el-button-group class="juque_button_group">
                <el-button size="default" type="success" @click="onAdd">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    添加
                </el-button>
            </el-button-group>
            <el-table :data="datasource" :border="true" class="juque_table">
                <el-table-column prop="sortNo" label="序号" show-overflow-tooltip>
                    <template #default="scope">{{ scope.row.index + 1 }}</template>
                </el-table-column>
                <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="taskType" label="任务类型" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag>{{ taskTypeCompute(scope.row.taskType) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onUp(scope.row.index)">
                            <el-icon>
                                <ele-Top />
                            </el-icon>
                            上移
                        </el-button>
                        <el-button size="small" text type="primary" @click="onDown(scope.row.index)">
                            <el-icon>
                                <ele-Bottom />
                            </el-icon>
                            下移
                        </el-button>
                        <el-popover placement="top">
                            <p class="juque_popover_p">确定删除吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="small" text>取消</el-button>
                                <el-button size="small" type="primary" @click="onDelete(scope.row)">确认</el-button>
                            </div>
                            <template #reference>
                                <el-button size="small" text type="primary">
                                    <el-icon>
                                        <ele-DeleteFilled />
                                    </el-icon>
                                    删除
                                </el-button>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <TaskListDialog v-if="dialogVisible" @on-check="onCheck" @on-close="() => { dialogVisible = false }">
        </TaskListDialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, ref, onMounted, computed } from 'vue';
import type { FormInstance } from 'element-plus';
import { TaskGroupRelationListModel, TaskInfoListModel } from '/@/interfaces/DataPipelineModel';
import MESSAGE from '/@/enums/message-enum';
import useObjectUtil from '/@/utils/objectUtil';
import { BaseRequest } from '/@/interfaces/BaseModel';
import { DictInfo } from '/@/enums/dict-info-enum';
import TaskListDialog from '/@/views/task-info/component/task-list-dialog.vue';
import { forEach } from 'lodash';

interface RelationModel extends TaskGroupRelationListModel {
    index: number,
}
interface State {
    dialogVisible: boolean | false,
    datasource: RelationModel[],
}
export default defineComponent({
    name: 'TaskInfoList',
    components: { TaskListDialog },
    props: {
        data: {
            type: Array<TaskGroupRelationListModel>,
            default: [],
        }
    },
    emits: ['onload'],
    setup(props, context) {
        const { data } = props;
        const searchFormRef = ref<FormInstance>();
        const state = reactive<State>({
            dialogVisible: false,
            datasource: [],
        });
        const taskTypeCompute = computed(() => {
            return (value: number) => {
                const dictInfo = DictInfo.taskType.filter(item => item.key === value);
                return dictInfo && dictInfo.length > 0 ? dictInfo[0].label : value;
            }
        });
        const methodMap = reactive({
            onAdd: function () {
                state.dialogVisible = true;
            },
            onCheck: function (data: TaskInfoListModel) {
                if (data) {
                    const result: RelationModel = { taskId: data.id, taskType: data.taskType, taskName: data.taskName, id: undefined, index: 0, sortNo: 0, taskGroupId: undefined };
                    const list: RelationModel[] = [...state.datasource, result];
                    methodMap.sort(list);
                    state.datasource = [...list];
                    const taskIdList: string[] = state.datasource.map((item: RelationModel) => item.taskId as string);
                    context.emit('onload', taskIdList);
                }
            },
            onUp: function (sort: number) {
                if (sort <= 0) {
                    return;
                }
                const a: RelationModel = { ...state.datasource[sort - 1] };
                const b: RelationModel = { ...state.datasource[sort] };
                let result: RelationModel[] = [];
                state.datasource.forEach((item: RelationModel, i: number) => {
                    let node: RelationModel = { ...item };
                    if (i === sort - 1) {
                        node = { ...b };
                    }
                    if (i === sort) {
                        node = { ...a }
                    }
                    result.push(node);
                })
                methodMap.sort(result);
                state.datasource = [...result];
                const taskIdList: string[] = state.datasource.map((item: RelationModel) => item.taskId as string);
                    context.emit('onload', taskIdList);
            },
            onDown: function (sort: number) {
                if (sort >= state.datasource.length) {
                    return;
                }
                const a: RelationModel = { ...state.datasource[sort] };
                const b: RelationModel = { ...state.datasource[sort + 1] };
                const result: RelationModel[] = [];
                state.datasource.forEach((item: RelationModel, i: number) => {
                    let node: RelationModel = { ...item };
                    if (i === sort) {
                        node = { ...b };
                    }
                    if (i === sort + 1) {
                        node = { ...a }
                    }
                    result.push(node);
                })
                methodMap.sort(result);
                state.datasource = [...result];
                const taskIdList: string[] = state.datasource.map((item: RelationModel) => item.taskId as string);
                    context.emit('onload', taskIdList);
            },
            onDelete: async function (record: RelationModel) {
                if (record) {
                    const result: RelationModel[] = state.datasource.filter((item: RelationModel) => item.index !== record.index);
                    methodMap.sort(result);
                    state.datasource = [...result];
                    const taskIdList: string[] = state.datasource.map((item: RelationModel) => item.taskId as string);
                    context.emit('onload', taskIdList);
                }
            },
            conver: function (data: TaskGroupRelationListModel[]) {
                const result: RelationModel[] = [];
                data.forEach((item: TaskGroupRelationListModel, index) => {
                    const relation: RelationModel = { ...item, index: index };
                    result.push(relation);
                });
                return result;
            },
            sort: function (data: RelationModel[]) {
                data.forEach((item, i) => item.index = i);
            }
        });
        // 挂载完成后
        onMounted(async () => {
            state.datasource = [...methodMap.conver(data)];
        });
        const sourceDatabaseRef = ref();
        const targetDatabaseRef = ref();
        return {
            searchFormRef,
            sourceDatabaseRef,
            targetDatabaseRef,
            DictInfo,
            taskTypeCompute,
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
<style scoped lang="scss">
@import '/@/views/task-info/task-info.scss';
</style>
